
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>

    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css">
   
    <link rel="stylesheet" type="text/css" href="themes/icon.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    <style>
       
      .east{float: right;margin-right: 630px;}  
      .center{height:100%;padding: 54px 70px;} 
      
      .east a{display: block;width:120px;margin: 25px}
      .top a{margin-right:20px}

     
    </style>
</head>
<body>
    <!-- ------------------------------top按钮------------------------------ -->
    <div style="margin:20px 60px;" class="top">
        <a href="javascript:void(0)" class="easyui-linkbutton news-btn" type='1' style="padding: 0 20px;">新闻分类</a>
        <a href="javascript:void(0)" class="easyui-linkbutton product-btn" type='2' style="padding: 0 20px;">用户管理</a>
     
    
    
    </div>

     <!-- -------------------------------content----------------------------- -->
    <div id="cc" data-options="fit:true">
            <div class="east" data-options="fit:true">
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addTree()">增加根节点</a>
                <a href="javascript:void(0)" class="easyui-linkbutton add" onclick="addChild()" index='aa'>增加</a>
                <a href="javascript:void(0)" class="easyui-linkbutton update" onclick="editorTree()" index='bb'>更改</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeTree()">删除</a>
            </div>
            <div class="center" data-options="fit:true">
            	
                <div class="demo-info" style="margin-bottom:10px">
                    
                   
                </div>
                        
                <ul id="tt" class="easyui-tree center-ul1" url="http://10.31.160.59:3000/cate/list/0" method='get'></ul>
            </div>
            <div id="dlg" class="easyui-dialog" title="Complex Toolbar on Dialog" style="width:400px;height:200px;padding:10px"
                data-options="
                    iconCls: 'icon-save',
                    toolbar: '#dlg-toolbar',
                    buttons: '#dlg-buttons'">
                    <form id="ff" method="post">
                        Please input root node's name:
                            <div style="margin-bottom:20px;margin-top:20px">
                                <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Root nodee:',required:true">
                            </div>
                           
                    </form>
                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
<!--                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
-->                    </div>
            </div>
            
        
    </div>  
    
    
    
    <!-- --------------------------------js--------------------------------- -->
        <script>
            
            var type=null;
            var parentId=null;
            var index=null;
                $('.news-btn').on('click',function(){
                    type=1;
                    parentId=null;
                     $('.center .center-ul1').tree({
                         url:'http://10.31.160.59:3000/cate/list/0'
                     }).tree('reload')
                 })

                 $('.product-btn').on('click',function(){
                     type=2;
                     parentId=null;
                    $('.center .center-ul1').tree({
                        url:'http://10.31.160.59:3000/cate/list/1'
                    }).tree('reload')
                })


            $('#dlg').dialog({
                title: 'editor Commentseweqwe',
                width: 400,
                height: 200,
                closed: true,
                modal: true});
//添加根节点
            function addTree(){
                if (type && parentId === null){
                    $('#dlg').dialog('open');
                }else{
                        $.messager.show({
                        title: 'Warnning',
                        msg: 'Please select parent code',
                        timeout: 1000,
                        showType: 'show',
                        style: 'position:absolut;bottom:130px;left:30px'
                    })
                }

            }

            function submitForm(){
                var text=$('.easyui-textbox').val();

                if(parentId!=null){
                    if(index=='aa'){
                        $.ajax({
                        url: "http://10.31.160.59:3000/cate/data",
                        method: 'post',
                        data: {
                            parentId:parentId,
                            type:type,
                            text:text,
                        },
                        async:true,
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#ff').form('clear');
                                $('.center .center-ul1').tree('reload')

                                type=null;})
                    }else if(index=="bb"){
                        $.ajax({
                        url: "http://10.31.160.59:3000/cate/data/"+parentId,
                        method: 'put',
                        data: {
                            text:text,
                        },
                        async:true,
                        }).done(function(res) {
                            $('#dlg').dialog('close');
                            $('#ff').form('clear');
                                $('.center .center-ul1').tree('reload')
                                type=null;})
                        }


                }else{
                    $.ajax({
                    url: "http://10.31.160.59:3000/cate/data",
                    method: 'post',
                    data: {
                        type:type-1,
                        text:text,
                    },
                    async:true,
                    }).done(function(res) {
                        $('#dlg').dialog('close');
                        $('#ff').form('clear');
                            $('.center .center-ul1').tree('reload')
                            type=null;
                        })
                    }


            }

//添加子节点
            $('.center ul').tree({
                onClick:function(node){
                    parentId=node._id;
                    type=node.type;
                }
            })

            function addChild(){

                if(parentId!=null){
                    index=$(".add").attr('index')
                    $('#dlg').dialog('open');


                }else{
                    $.messager.show({
                        title: 'Warnning',
                        msg: '请选择父节点',
                        timeout: 1000,
                        showType: 'show',
                        style: 'position:absolut;bottom:130px;left:30px'
                    })
                }
            }



            function editorTree(){
                if(parentId!=null){
                    index=$(".update").attr('index');
                    $('#dlg').dialog('open');

                }else{
                    $.messager.show({
                        title: 'Warnning',
                        msg: '请选择节点',
                        timeout: 1000,
                        showType: 'show',
                        style: 'position:absolut;bottom:130px;left:30px'
                    })
                }
             }

            function removeTree(){
                $.ajax({
                    url: "http://10.31.160.59:3000/cate/data/"+parentId,
                    method: 'delete',
                    async:true,
                    }).done(function(res) {
                        $('#dlg').dialog('close');
                        $('#ff').form('clear');
                            $('.center .center-ul1').tree('reload');
                            type=null;
                            $.messager.show({
                            title: 'ok',
                            msg: '删除成功!',
                            timeout: 1000,
                            showType: 'show',
                            style: 'position:absolut;bottom:130px;left:30px'
                            })

                            })
            }
       </script>
</body>
</html>